import {
  TabBar
} from 'antd-mobile'
import {
  Route,
  Switch,
  Redirect
} from 'react-router-dom'

import cookbook from '@/assets/images/cookbook.png'
import cookbook_active from '@/assets/images/cookbook-active.png'
import menu from '@/assets/images/menu.png'
import menu_active from '@/assets/images/menu-active.png'
import location from '@/assets/images/location.png'
import location_active from '@/assets/images/location-active.png'
import more from '@/assets/images/more.png'
import more_active from '@/assets/images/more-active.png'

import { CookBook } from './cookbook'
import Category from './category/Category'
import Map from './map/Map'
import More from './more/More'

import { HomeWrap } from './styledHome'

const HomeUi = (props) => {
  return (
    <HomeWrap>
      <div className="main">
        <Switch>
          <Route path="/home/cookbook">
            <CookBook></CookBook>
          </Route>
          <Route path="/home/category">
            <Category></Category>
          </Route>
          <Route path="/home/map">
            <Map></Map>
          </Route>
          <Route path="/home/more">
            <More></More>
          </Route>
          <Redirect from="/home" to="/home/cookbook"></Redirect>
        </Switch>
      </div>
      <TabBar
        tintColor="#000"
        unselectedTintColor="#666"
      >
        <TabBar.Item
          key="cookbook"
          selected={props.selected === 'cookbook'}
          icon={{uri: cookbook}}
          selectedIcon={{uri: cookbook_active}}
          title="菜谱大全"
          onPress={props.onTabPress('cookbook')}
        >
        </TabBar.Item>
        <TabBar.Item
          key="category"
          selected={props.selected === 'category'}
          icon={{uri: menu}}
          selectedIcon={{uri: menu_active}}
          title="分类"
          onPress={props.onTabPress('category')}
        >
        </TabBar.Item>
        {
          props.checked && (
            <TabBar.Item
              key="map"
              selected={props.selected === 'map'}
              icon={{uri: location}}
              selectedIcon={{uri: location_active}}
              title="地图"
              onPress={props.onTabPress('map')}
            >
            </TabBar.Item>
          )
        }
        <TabBar.Item
          key="more"
          selected={props.selected === 'more'}
          icon={{uri: more}}
          selectedIcon={{uri: more_active}}
          title="更多"
          onPress={props.onTabPress('more')}
        >
        </TabBar.Item>
      </TabBar>
    </HomeWrap>
  )
}

export default HomeUi